import React from 'react';

type grid = {
  /** @columns 列数量 */ columns: CSSStyleDeclaration['gridTemplateColumns'];
  /** @rows 行数量 */ rows: CSSStyleDeclaration['gridTemplateRows'];
  /** @gap 每个块件的间隔 */ gap: CSSStyleDeclaration['gap'];
} & React.HTMLAttributes<HTMLDivElement>;

type gridItem = {
  /** @gridArea <行开始> / <列开始> / span <列占几格> / span <行占几格> */ gridArea: CSSStyleDeclaration['gridArea'];
} & React.HTMLAttributes<HTMLDivElement>;

export default (): {
  /** 父节点 */ Grid: (e: grid) => JSX.Element;
  /** 子节点 */ GridItem: (e: gridItem) => JSX.Element;
} => {
  const Grid = ({ ...otherProps }: grid): JSX.Element => (
    <div
      {...otherProps}
      style={{
        width: '100%',
        height: '100%',
        display: 'grid',
        gridTemplateColumns: `repeat(${otherProps.columns}, 1fr)`,
        gridTemplateRows: `repeat(${otherProps.rows}, 1fr)`,
        gap: otherProps.gap,
        ...otherProps.style,
      }}
    >
      {otherProps.children}
    </div>
  );

  const GridItem = ({ ...otherProps }: gridItem): JSX.Element => (
    <div
      {...otherProps}
      style={{
        gridArea: otherProps.gridArea,
        ...otherProps.style,
      }}
    >
      {otherProps.children}
    </div>
  );

  return {
    Grid,
    GridItem,
  };
};
